Skip to main content

배열 타입

배열 타입​

let arrayOfNumbers: number[];

arrayOfNumbers = [2, 4, 6, 8, 10];
  • 변수 이름 다음에 : type[] 으로 배열을 선언할 수 있다.
  • 변수 이름 다음에 : Array<type> 으로 배열을 선언할 수 있다.
  • 배열에 타입을 지정해주지 않으면 any[] 로 취급한다.

Readonly​

일반 배열은 가변인 반면, 상황에 따라 불변인 배열이 필요할 수도 있다.
불변인 배열을 만들기 위해 readonly 배열 타입을 사용하며 일반 배열과 형태는 같지만
내용을 갱신할 수 없다는 점만 다르다.

읽기 전용 배열은 명시적 타입 이노테이션으로 만들 수 있으며
읽기 전용 배열을 갱신하려면 .push, .splice처럼 내용을 바꾸는 동작 대신
.concat, .slice 같이 내용을 바꾸지 않는 메서드를 사용하여야 한다.

danger

읽기 전용 배열은 값을 바꿀 수 없으므로 코드를 쉽게 이해할 수 있는 장점이 있지만
결국 자바스크립트 배열로 구현한 것이다.
즉, 스프레드(...)나 .slice 등으로 배열을 조금만 바꿔도 원래 배열을 복사해야 하므로
주의하지 않으면 프로그램의 성능이 크게 저하될 수도 있다.

function printArray(fruits: readonly string[]) {
  friuts[0] = 'apple'; // 변경 불가능
  console.log(fruits);
}
  • object의 내용을 함수 내부에서 변경할 수 없다.
  • object의 불변성을 보장해주어야 하기 때문에 자주 쓰인다.

Tuple​

배열의 서브 타입이며 길이가 고정되어 있고, 각 인덱스의 타입이 알려진 배열의 일종이다.
다른 타입과 달리 튜플은 선언할 때 타입을 명시하여야 한다.
그 이유는 자바스크립트에서 배열과 튜플에 같은 문법을 사용하는데
타입스크립트에서는 대괄호를 배열 타입으로 추론하기 때문이다.

let students: [string, number];
students = ['hello', 123];
console.log(students[0]);
console.log(students[1]);
  • 출력을 할 때 인덱스 번호를 통해 해주어야 한다.
  • 리액트의 useState와 유사하다.
  • 사용하는 것을 권장하지 않는다.
  • 나중에 interface, type alias, class로 대체해서 사용된다.

선택형 요소가 있는 튜플​

let trainFares: [number, number?][] = [
  [3.75],
  [8.25, 7.70],
  [10.50]
]

위의 튜플은 아래와 같은 형태이다.
let moreTrainFares: ([number] | [number, number])[] = [...]

최소 한 개 이상의 요소를 갖는 튜플​

let friends: [string, ...string[]] = ['Sara', 'Tali', 'Chloe', 'Claire'];